<template>
  <div class="app-container">
    <el-form v-show="showSearch" ref="queryRef" :inline="true" :model="queryParams" label-width="68px">
      <el-form-item label="设备名称" prop="deviceName">
        <el-input v-model="queryParams.deviceName" clearable placeholder="请输入设备名称" @keyup.enter="handleQuery"/>
      </el-form-item>
      <el-form-item label="创建时间" prop="timeData">
        <el-date-picker v-model="timeData" clearable end-placeholder="结束日期" range-separator="-"
                        start-placeholder="开始日期" type="daterange" value-format="YYYY-MM-DD ">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button icon="Search" type="primary" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="marg-main newBox">
      <SwitchBar ref="tabBar" :data="tabStatusData" @change-id="changeId"></SwitchBar>
    </div>

    <el-table v-loading="loading" :data="alertDataList">
      <el-table-column align="center" label="序号" type="index" width="55"/>
      <el-table-column align="center" label="设备名称" prop="deviceName" width="180"/>
      <el-table-column align="center" label="备注名称" prop="nickname" width="180"/>
      <el-table-column align="center" label="所属产品" prop="productName" width="200"/>
      <el-table-column align="center" label="报警数据类型" prop="type" width="180">
        <template #default="scope">{{ scope.row.type === 0 ? '老人异常数据' : '设备异常数据' }}</template>
      </el-table-column>
      <el-table-column align="center" label="接入位置" prop="accessLocation" width="180"/>
      <el-table-column align="center" label="数据值" prop="dataValue" width="180"/>
      <el-table-column align="center" label="报警时间" prop="createTime" width="200"/>
      <el-table-column align="center" label="报警规则" prop="alertReason" width="200"/>
      <el-table-column align="center" label="处理结果" prop="processingResult" width="320">
        <template #default="scope">{{ scope.row.processingResult ? scope.row.processingResult : '--' }}</template>
      </el-table-column>
      <el-table-column align="center" label="处理人" prop="processorName" width="180">
        <template #default="scope">{{ scope.row.processorName ? scope.row.processorName : '--' }}</template>
      </el-table-column>
      <el-table-column align="center" label="处理时间" prop="processingTime" width="300">
        <template #default="scope">
          <span>{{ scope.row.processingTime ? parseTime(scope.row.processingTime, '{y}-{m}-{d}') : '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态" prop="status" width="120">
        <template #default="scope">
          <span :class="'status-dot-' + scope.row.status"
                class="status-dot">{{ scope.row.status === 0 ? '待处理' : '已处理' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="84">
        <template #default="scope">
          <div class="operateCon">
            <a :class="scope.row.status === 1 ? 'disabled' : ''" class="font-bt" @click="handleOpen(scope.row)">处理</a>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <pagination
        v-show="total > 0"
        v-model:limit="queryParams.pageSize"
        v-model:page="queryParams.pageNum"
        :total="total"
        @pagination="getList"
    />

    <DialogFrom
        ref="formRef"
        :visible="visible"
        @handle-close="handleClose"
        @handle-sub="handleSub"
    />
  </div>
</template>

<script name="AlertData" setup>
import {handleAlertRule, listAlertData} from '@/api/nursing/alertData';
import {getEndTime, getStartTime} from '@/utils/date'
import SwitchBar from '@/components/switchBar/switchBar.vue';
import DialogFrom from './components/DialogFrom.vue';
import {tabStatusData} from '@/utils/commonData';

const {proxy} = getCurrentInstance();
const alertDataList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const total = ref(0);
const title = ref('');
const visible = ref(false);
const disposeId = ref('');
const timeData = ref([])
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    deviceName: null,
    createTime: null,
  },
  rules: {
    deviceName: [
      {required: true, message: '设备名称不能为空', trigger: 'blur'},
    ],
  },
});

const {queryParams, form, rules} = toRefs(data);

/** 查询报警数据列表 */
function getList() {
  loading.value = true;
  const time = timeData.value
  if (time.length > 0) {
    queryParams.value.startTime = getStartTime(time[0])
    queryParams.value.endTime = getEndTime(time[1])
  }
  listAlertData(queryParams.value).then((response) => {
    alertDataList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

// 处理结果提交
const handleSub = async (val) => {
  const data = {
    ...val,
    id: disposeId.value,
  };
  const res = await handleAlertRule(data);
  debugger
  if (res.code === 200) {
    proxy.$modal.msgSuccess('操作成功');
    handleClose();
    getList();
    formRef.value.handleClear();

  }
};

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value = {};
  queryParams.value.pageNum = 1;
  queryParams.value.pageSize = 10;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  timeData.value = []
  // proxy.resetForm('queryRef');
  handleQuery();
}

// 获取tab索引值
const changeId = (val) => {
  queryParams.value.pageNum = 1;
  if (val === 0 || val === 1) {
    queryParams.value.status = val;
  } else {
    delete queryParams.value.status;
  }
  delete queryParams.value.id;
  getList();
};

// 打开处理结果弹层
const handleOpen = (val) => {
  console.log(val);
  if (val.status === 1) {
    return;
  }
  delete queryParams.value.id;
  disposeId.value = val.id;
  visible.value = true;
};

// 关闭处理结果弹层
const handleClose = () => {
  delete queryParams.value.id;
  visible.value = false;
};
getList();
</script>
